
/************************************************************************************************
*   深圳市摩西尔电子有限公司 @版本所有@
*
*   此文件用于硬件拓扑图样式表
*
* 修改:
*   1. 类型 : 创建
*      作者 : 巫昭雯
*      时间 : 2021.1.7
*      内容 : 所有代码
************************************************************************************************/

/* 画布最外层 */
#mc_hw_topo_cont_wrap {
    background-color: #255388;
    overflow: scroll;
    width: 100%;
    height: calc(100% - 0px);
    position: relative;
    flex-shrink: 1;
    flex-grow: 1;
}

/* 缩放层 */
#mc_topo_scale {
    transform: scale(1.2);
    position: absolute;
    top: 0;
    left: 0;
}

/* 图形容器 */
#mc_hw_topo_container {
    /* width: 1000%; */
    /* height: 100%; */
    background-color: #255388;
    position: absolute;
}

/* 线条容器 */
#mc_hw_svg_layer_line {
    position: absolute;
    pointer-events: none;
    z-index: 10;
}

.canvas_wrap {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

#mc_hw_topo_container div {
    box-sizing: border-box;
    z-index: 11;
}


/* 每一项外层 */
.one_item_wrap {
    /* display: inline-block; */
    /* margin: 20px; */
    padding: 20px;
    position: relative;
}

.one_item_wrap .topo_hub {
    display: inline-block;
    /* margin-top: 30px; */
}

.one_item_wrap .topo_block {
    z-index: 11;
    /* display: inline-block */
    /* background: radial-gradient(circle, #eee, #ccc, #aaa) !important;
    border: 1px solid #aaa; */
}



/* 方向布局 --- 每一个发送卡的排列*/
.layout_horizontal{
    display: flex;
    flex-direction: column;
}

/* 发送卡布局 纵向排列 */
.layout_vertical{
    display: flex;
    flex-direction: row;
} 

.layout_vertical .one_item_wrap{
    top: 0px !important;
}


/* 卡 */
.topo_send {
    position: relative;
    width: 300px;
    height: 30px;
    background-color: #f7efef;
    /* border: 1px solid green; */

    /* update color */
    background-color: #bb2222;
}

.topo_hub {
    position: relative;
    width: 30px;
    /* height: 100px; */
    background-color: hotpink;
    /* border: 1px solid hotpink; */
    /* update color */
    background-color: #01ae10;
}

.topo_receive {
    width: 30px;
    height: 30px;
    background-color: indigo;
    position: relative;
    /* border: 1px solid indigo; */

    /* update color */
    background-color: #061695;
}


/* 多个卡同一个颜色 */
.topo_send,.topo_hub,.topo_receive{
    color: #f1efef  !important; 
}

.topo_send, .topo_hub, .topo_receive:hover{
    cursor: pointer;
} 

/* 多张接受卡卡 */
.topo_receive.multi {
    box-shadow: 2px 2px 1px 0px #eee;
}


/* 输出口 */
.topo_send_port,
.topo_hub_port {
    width: 8px;
    height: 8px;
    background: green;
    position: absolute;
    /* width: 16px;
    height: 16px; */

    /* update color */
    background-color: #e5e5e5;
}

.send_port_wrap {
    position: absolute;
    bottom: 0px;
}


.hub_port_wrap {
    position: absolute;
    right: 0px;
}

.no_send_card_wrap {
    margin-top: 50px;
    display: flex;
    position: relative;
}

.recevie_card_warp {
    position: absolute;
}

/* 卡名称  */
/* 发送卡 */
[card_name] {
    display: inline-block;
    width: 100%;
    text-align: center;
    line-height: 0px;
    font-weight: 700;
    height: 0px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* hub卡名称 */
[card_type=HUB] {
    color: white;
    position: absolute;
    top: 50%;
    top: 43%;
    transform: translateY(-50%)
}

.hub_port_reci_wrap {
    margin-left: 68px;
    position: relative;
}

/* 发送卡输出口子集容器外层 */
.send_port_child_wrap{
    width: 0;
    display: flex;
    flex-direction: column;
}


/* msg */
#topo_show_msg{
    z-index: 12;
    position: absolute;
    background: #fff;
    padding: 10px;
    display: none;
    font-weight: 600;
}

